{% extends 'base.html' %}

{% block title %}修改文章{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 bg-white p-4">

        <h3 class="border-bottom mb-4 shadow-sm">修改文章</h3>

        <form class="needs-validation" method="POST" enctype="multipart/form-data" novalidate>
            {% csrf_token %}
            <div class="invalid-feedback">
            {% for non_field_error in form.non_field_errors %}
                <span>{{ non_field_error }}</span>
            {% endfor %}
            </div>
            <fieldset class="form-group">
            {% for field in form %}
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <div class="input-group">
                    {% if field.label == '栏目' %}
                    <select name="category" class="form-control custom-select" id="id_category">
                        {% for category in categories %}
                            <option value="{{ category.id }}" {% ifequal category.id object.category.id %}selected{% endifequal %}>{{ category.name }}</option>
                        {% endfor %}
                    </select>

                    {% elif field.label == '标签' %}

                    <select name="tags" class="form-control custom-select" id="id_tags" multiple="">
                        {% for tag in tags %}
                        <option value="{{ tag.id }}" {% if tag in post_tags %}selected{% endif %}>{{ tag.name }}</option>
                        {% endfor %}
                    </select>

                    {% else %}
                        {{ field }}
                    {% endif %}

                    <div class="invalid-feedback">
                        {% for error in field.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>

                {% endfor %}

            </fieldset>

            <!-- markdonw preview -->
            {{ form.media }}

            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">保存</button>
            </div>
        </form>
    </div>
    </div>
</div>
{% endblock %}
<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
